/* var */

@brand-color: #588d55;
@brand-color-dark: #517c4e;
@brand-text-color: #f6f6f6;
@brand-text-color-dark: #d1d1d1;
@footer-height: 8.5rem;
@nav-height: 3.5rem;
@banner-height: 5.2rem;
@carousel-heght: 32rem;
/* Base */


.y-about {
  .title {
    text-align: center;
    padding-top: 1rem;
  }
}

.y-example{
  .row {
    padding: 3rem 0;
  }
}

.y-licence {
  // padding: 2rem 0rem;
  .title {
    text-align: center;
    padding-top: 1rem;
  }
  img {
    padding: 2rem 0.5rem 0rem; // width: 100%;
    // height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .row {
    padding-bottom: 3rem;
  }
}

.y-contact {
  .map {
    // width: 100%;
    display: block;
    margin: 2rem auto;
  }
  .title {

  }

}

.y-banner {
  .y-banner-inner {
    height: @banner-height;
    // line-height: @nav-height;
    .navbar-brand {
      height: @banner-height - 1;
      img {
        height: 100%; // width: @logo-height;
      }
    }
  }
}

.y-navbar {
  padding-top: 0;
  padding-bottom: 0;
  background-color: @brand-color;
  .navbar-nav {
    .nav-item {
      .nav-link {
        padding: 1rem 2rem;
        color: @brand-text-color;
      }
      .nav-link:hover {
        background-color: @brand-color-dark;
      }
      .dropdown-toggle {
        .dropdown-menu {
          background-color: @brand-color-dark;
          .dropdown-item {}
        }
      }
    }
  }
}

/* Carousel base class */

.carousel {
  // margin-bottom: 4rem;
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    // left: 0;
    bottom: 3rem;
    z-index: 10;
  }
  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: @carousel-heght;
    background-color: #777;
  }
  .carousel-item>img {
    // position: absolute;
    // top: 0;
    // left: 0;
    min-width: 100%;
    height: @carousel-heght;
  }
}

/* Center align the text within the three columns below the carousel */

.hot {
  .hot-item {
    height: 150px;
    color: #666;
    border-left: 1px solid #ddd;
    padding: 16px 32px;
    &:hover {
      background-color: #fff;
    }
    .title {
      font-size: 18px;
      margin-bottom: 12px;
    }
    .title2 {
      font-size: 14px;
    }
    .pic {
      height: 64px;
      width: 64px;
      display: block;
      position: absolute;
      right: 16px;
      bottom: 16px;
    }
  }
  .hot-item-last {
    border-right: 1px solid #ddd;
  }
}


.service {
  .service-item {
    // margin-bottom: 1.5rem;
    text-align: center;
    img {
      width: 140px;
      height: 140px;
      margin-bottom: 0.5rem;
    }
    p, h2 {
      margin-right: .75rem;
      margin-left: .75rem;
    }
    h2 {
      font-weight: 400;
    }
    .title {}
    .text {
      margin-bottom: 0.1rem;
    }

  }
}

/* Featurettes
------------------------- */
.featurette {
  .featurette-divider {
    margin: 1.5rem 0 3rem;
  }
  .title {
    text-align: center;
  }
  .row {
    padding-bottom: 3rem;
    text-align: center;
    .featurette-item {
      padding-bottom: 2rem;

      img{
        // padding: 0rem 0rem 0rem; // width: 100%;
        margin-bottom: 0.5rem;
        max-width: 100%;
        max-height: 100%;
        // border-radius: 5%;
      }
      h2 {
        margin-right: .75rem;
        margin-left: .75rem;
        font-size: 1.5rem;
        font-weight: 400;
      }

    }
  }
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .featurette-heading {
  }
}

@media (min-width: 62em) {
  .featurette-heading {
  }
}